<template>
  <div>
    <el-row>
      <el-col :span="6"
              :offset="index > 0 ? 2 : 0"
              v-for="(item,index) in myDormInfo"
              :key="item._id">
        <el-card class="box-card">
          <div slot="header">
            <span>{{item.name}}</span>
          </div>
          <div class="roomateInfo">{{'学号：'+ item.studentNumber}} </div>
          <div class="roomateInfo">{{'性别：'+ item.sex}}</div>
          <div class="roomateInfo">{{'所在宿舍楼宇：'+ item.tower}}</div>
          <div class="roomateInfo">{{'所在宿舍号：'+ item.dorm}}</div>
          <div class="roomateInfo">{{'学院：'+ item.college}}</div>
          <div class="roomateInfo">{{'班级：'+ item.class}}</div>
          <div class="roomateInfo">{{'电话：'+ item.tel}}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'StudentDorm',
  props: [''],
  data () {
    return {
      myDormInfo: []
    }
  },
  created () {
    this.getMyDormInfo()
  },

  components: {},

  computed: {},

  methods: {
    // 请求本宿舍数据
    async getMyDormInfo () {
      const { data: res } = await this.$axios.get('/student/myDormInfo', {
        params: {
          tower: window.localStorage.getItem('tower'),
          dorm: window.localStorage.getItem('dorm')
        }
      })
      // console.log(res)
      if (res.meta.code === 200) {
        this.myDormInfo = res.result
      } else {
        this.$message.warning(res.meta.msg)
      }
    }
  }

}

</script>
<style lang='less' scoped>
.el-col {
  margin-top: 20px;
  .roomateInfo {
    margin-top: 10px;
  }
}
</style>
